/**
 * webpack.config.js  webpack的配置文件
 *    作用: 指示 webpack 干哪些活 (当你运行webpack指令时, 会加载里面的配置)
 *
 *    所有构建工具都是基于nodejs平台运行. 模块化默认采用commonjs
 *
 *    style: 1.下载    2.使用(module.rules中配置)
 *    1.配置css   下载 npm i style-loader css-loader  -D
 *      配置less  下载 npm i style-loader css-loader less-loader  -D
 *    2.使用  module: { rules: [{test: /\.css$/, use: ['xxx-loader',...] } ] }
 *
 *    html: 1.下载   2.引入   3.使用(plugins中配置)
 *    1.下载 npm i html-webpack-plugin -D
 *    2.引入 const HtmlWebpackPlugin = require('html-webpack-plugin')
 *    3.使用 plugins: [ new HtmlWebpackPlugin(option), ...]
 *
 *    img:  1.下载    2.使用(module.rules中配置)
 *    1.下载 npm i url-loader file-loader -D    | Tips: url-loader依赖于file-loader
 *    2.使用 module: { rules: [{test: /\.css$/, loader: 'url-loader', options: {} } ] }
 *    3.额外下载 html-loader 处理<img>标签中的图片打包, npm i html-loader
 *    4.配置 html-loader { rules: [{test: /\.html$/, loader: 'html-loader' } ] }
 *
 *    Tips: webpack不会把文件重复打包, 例如: 多个地方引入同一张图片
 */
const path = require('path')
// HtmlWebpackPlugin 是一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/main.js',
  // 输出
  output: {
    // 输出文件名
    filename: "built.js",
    // 输出路径
    // __dirname nodejs的变量, 代表当前文件的目录绝对路径
    // 当前文件的目录: webpack.config.js 是当前文件, 所在目录 03.compile_package_....
    path: path.resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader的配置
      {
        test: /\.css$/,
        // 如果需要使用多个loader, 需要写use属性  Tips: Rule.loaders是 Rule.use的别名, 且Rule.loaders已废弃
        // use属性的值是数组, 就表示需要使用多个loader共同处理use
        use: ['style-loader', 'css-loader']
      },
      // 问题: 默认处理不了html中img图片
      // 处理图片资源
      {
        test: /\.(jpg|png|gif)$/,
        // 如果只使用一个loader, 直接配置loader属性
        // Tips: Rule.loader是 Rule.use[ { loader } ] 的简写

        // loader属性的值是字符串, 表示只使用一个loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8K, 就会被base64处理 | 下面计算单位为byte
          // 有点: 减少请求数量 (介绍服务器压力)
          // 缺点: 图片体积会更大 (文件请求速度更慢)
          limit: 8 * 1024,

          // webpack v4.44.1问题: 因为url-loader默认使用es6模块化解析, 而html-loader引入图片是common.js
          // 解析时会出现问题: [object Module]
          // 解决: 关闭url-loader的es6模块化, 使用commonjs模块化规范解析
          esModule: false,
          // [hash:8]取图片的hash的前8位
          // [ext]取文件原来扩展名
          name: '[hash:8].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
        loader: 'html-loader'
      }

    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能: 默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
    // 需求: 需要有结构的HTML文件  --> 构造器传入参数 HtmlWebpackPlugin(option)
    new HtmlWebpackPlugin({
      // 复制 ./src/index.html 文件, 并自动引入打包输出的所有资源(JS/CSS)
      template: "./src/index.html"
    })
  ],
  // 模式
  mode: 'development'
  // mode: 'production',
}
